<template>
	<view class="content">
		<!--支付信息-->
		<view class="content_2">
			<view class="title_2">支付信息</view>
			<view class="integral_view">
				<view class="integral_text">积分抵扣</view>
				<switch color="#00E266" disabled="true"></switch>
			</view>
		</view>
		<!--费用详细-->
		<view class="content_3">
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">信息编号</view>
					<view class="cost_time"></view>
				</view>
				<view class="cost_money">{{order_sn}}</view>
			</view>
		</view>
		<!--底部提交-->
		<view class="content_5">
			<view class="total_view">
				<image class="total_icon" src="../../../../../static/index/detail/pay/house_pay.svg"></image>
				<view class="total_money">
					<view class="pay_money">￥{{order_money}}</view>
					<view class="count_money">已优惠0.00</view>
				</view>
				<view class="service_money">含服务费￥0.00</view>
			</view>
			<view class="submit" @click="toPay">去支付</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				//支付金额
				order_money: '',
				//信息编号
				order_sn: '',
			}
		},
		methods: {
			toPay: function() {
				new Request('customer/push/pay/Pay_Order/PayOrder').request(
					()=>{
						return 'POST'
					},
					()=>{
						return {
							openid: app.globalData.openid,
							order_id: this.order_id,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
						}
					},
					(res)=>{
						//判断
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							return;
						}
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp.toString(),
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.sign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									position: 'center',
									title: '已取消支付',
									icon: 'none'
								})
							}
						});
					}
				)
			}
		},
		onLoad(option) {			
			var API_URL = 'customer/push/Create_Push_Order/GetOrderDetail';
			this.order_id = option.order_id;
			new Request(API_URL).request(
				()=>{
					return 'POST'
				},
				()=>{
					return {
						openid: app.globalData.openid,
						order_id: this.order_id,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project,
					}
				},
				(res)=>{
					if(res.data.code == 1){
						//订单编号
						this.order_sn = res.data.order_sn;
						//支付金额
						this.order_money = res.data.order_money;
						return;
					}
					new Request().showToast(res.data.msg);
				}
			);
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		房源详细样式
	*/
	.content_1 {}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		width: 400upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	/*
		支付信息样式
	*/
	.content_2 {
		height: 88upx;
		background-color: #B3E9DC;
		display: flex;
		align-items: center;
		padding-left: 30upx;
	}

	.title_2 {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
		margin-right: 50upx;
		white-space: nowrap;
	}

	.integral_view {
		height: 42upx;
		width: 430upx;
		background-color: #FFFFFF;
		border-top-left-radius: 30upx;
		border-bottom-left-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25upx 65upx;
	}

	.integral_text {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #666666;
	}

	/*
		费用详细样式
	*/
	.content_3 {
		/* height: 340upx; */
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40upx;
	}

	.detail_money {
		width: 100%;
		height: 38upx;
		line-height: 38upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0;
	}

	.costdetail_box {
		height: 38upx;
		font-size: 28upx;
		display: flex;
		align-items: baseline;
		color: #333333;
	}

	.cost_name {
		margin-right: 10upx;
	}

	.cost_time {
		font-size: 18upx;
		color: #999999;
	}

	.cost_money {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}

	/*
		优惠券样式
	*/
	.content_4 {
		height: 120upx;
		margin-top: 40upx;
	}

	.coupon_view {
		height: 120upx;
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		padding: 0upx 70upx;
		display: flex;
		align-items: center;
	}

	.coupon_icon {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 5upx solid #999999;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_icon_active {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 10upx solid #519DFF;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_name {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}

	.coupon_name_active {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #519dff;
	}

	/*
		底部提交样式
	*/
	.content_5 {
		position: fixed;
		z-index: 999;
		height: 100upx;
		width: 734upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 20upx;
	}

	.total_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.total_icon {
		height: 92upx;
		width: 92upx;

	}

	.total_money {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 20upx;
		margin-left: 20upx;
	}

	.pay_money {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.count_money {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
	}
	
	.service_money{
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		margin-top: -35upx;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}
</style>
